<template>
  <div class="wrapper">
    <el-form label-position="right" class="demo-form-inline" :rules="rules" :model="customerDetail" ref="customerDetail"
             label-width="100px">
      <el-row style="width:100%">
        <h4 style="margin-top: 0">客户基本信息</h4>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="销售员:">
            <el-input :disabled="true" v-model="customerDetail.userName" style="width: 220px" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="客户名称:" prop="customerName">
            <el-input v-model="customerDetail.customerName" placeholder="客户名称" style="width: 220px" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="客户类别:" prop="customerType">
            <el-select v-model="customerDetail.customerType" placeholder="请选择" style="width: 220px" size="small">
              <el-option v-for="item in customerLevels" :label="item.value"
                         :value="item.key.toString()" :key="item.key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="客户网站:">
            <el-input v-model="customerDetail.customerWeb" placeholder="请输入以http://开头的网址" style="width: 220px" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item style="width: 320px" label="所属行业:">
            <industry-select :disabled = false :value="KHhangye" />
          </el-form-item>
        </el-col>
      </el-row>

      

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item style="width: 320px" label="客户地址:" >
            <area-select :value="arrays" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="详细地址:">
            <el-input v-model="customerDetail.address" placeholder="详细地址" style="width: 220px" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="客户来源:">
            <el-input v-model="customerDetail.customerFrom" placeholder="客户来源" style="width: 220px" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      

      <el-row class="inline-row">
        <el-col :span="24">
          <el-form-item label="是否标记:">
            <el-radio v-model="isSign" class="radio" label="1" v-if="customerDetail.signFlag == '1'">是</el-radio>
            <el-radio v-model="isSign" class="radio" label="0" v-if="customerDetail.signFlag == '1'">否</el-radio>

            <el-radio v-model="unSign" class="radio" label="1" v-if="customerDetail.signFlag == '0'">是</el-radio>
            <el-radio v-model="unSign" class="radio" label="0" v-if="customerDetail.signFlag == '0'">否</el-radio>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="KP:">
            <el-checkbox v-model="Flag" v-if="customerDetail.kpFlag == '1'"></el-checkbox>
            <el-checkbox v-model="unFlag" v-if="customerDetail.kpFlag == '0'"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>

			<!--新增关联品牌字段-->
			<el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="关联品牌:">
            <el-input v-model="customerDetail.brandName" placeholder="关联品牌" style="width: 220px" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row> 


      <el-row style="width:100%">
        <h4>联系人信息</h4>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="联系人名称:">
            <el-input v-model="contactData.contactName" placeholder="联系人名称" style="width: 220px" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="手机电话:">
            <el-input v-model="contactData.tel" placeholder="手机电话" style="width: 220px" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="办公电话:">
            <el-input v-model="contactData.phone" placeholder="办公电话" style="width: 220px" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="inline-row">
        <el-col :span="8">
          <el-form-item label="QQ:">
            <el-input v-model="contactData.qq" placeholder="QQ" style="width: 220px" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="action_row" >
        <el-col :span="12">
          <el-button type="primary" class="top_save" @click="onSubmit" size="small" :disabled="disabled"><i class="fa fa-save"></i> 保存</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="danger" class="top_close" @click="close" size="small"><i class="fa fa-sign-out"></i> 退出</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import Vue from 'vue';
  import axios from '~/plugins/axios';
  import * as types from '../../store/mutation-types/customer/index';
  import {mapGetters, mapActions, mapMutations} from 'vuex';
  import {
    Row, Col, Form, FormItem, Input, Select, Option, Radio, DatePicker, Cascader,
    Button, Table, TableColumn, Checkbox, Message
  } from 'element-ui'
  import AreaSelect from '~components/areaSelect.vue'
  import IndustrySelect from '~components/industrySelect.vue'

  import {getLevel, validTel ,checkQQ, removeEmptyKey} from '../../utils/auth'

  Vue.use(Row);
  Vue.use(Col);
  Vue.use(Form);
  Vue.use(FormItem);
  Vue.use(Input);
  Vue.use(Select);
  Vue.use(Option);
  Vue.use(Radio);
  Vue.use(DatePicker);
  Vue.use(Cascader);
  Vue.use(Button);
  Vue.use(Table);
  Vue.use(TableColumn);
  Vue.use(Checkbox);

  export default {
    components: {
        AreaSelect,
        IndustrySelect
    },
    head(){
        return {
            title: "客户编辑",
            meta: [
                { hid: 'edit-customer', name: 'edit-customer', content: 'edit-customer' }
            ]
        }
    },
    data () {
      return {
          tabName: '客户编辑',
        rules: {
          customerName: [
            {required: true, message: '请输入客户名称', trigger: 'blur'}
          ],
          customerType: [
            {required: true, message: '请选择客户类别', trigger: 'blur'}
          ]
        },
        unSign: '0',
        isSign: '1',
        Flag: true,
        unFlag: false,
        contactData: {
            contactName: '',
            tel: '',
            phone: '',
            qq: ''
        },
        CheckcontactData: {
              contactName: '',
              tel: '',
              phone: '',
              qq: ''
        },
        arrays:[],
        KHhangye:[],
        showD:false,
        disabled:false
      };
    },
    methods: {
      
      getCustomerDetail (id, customerContactId) {
      
        this.$store.dispatch('salesCategoryList');   // 客户类别

        this.$store.dispatch('getAllProvinceList');    // 获取省市区

        this.$store.dispatch('customerDetail', {id: id})    // 客户详情
          .then((response) => {
            if(!response){return}
            let result = response.data;
            this.arrays.push(result.data.provinceId,result.data.cityId,result.data.areaId)
            let list = null;
            
            this.brandName=result.data.brandName  //关联品牌
            
            if(result.data.customerIndustry&&result.data.customerIndustry.length) list = result.data.customerIndustry.split("");
            if(list && list.length){
              this.KHhangye[0] = list[0];
              this.KHhangye[1] = this.KHhangye[0]+list[1]+list[2];
              this.KHhangye[2] = this.KHhangye[1]+list[3];
              this.KHhangye[3] = this.KHhangye[2]+list[4];
            }
            //this.KHhangye = [result.data.customerIndustry]
            if (result && result.code === 0) {
              this.$store.commit(types.CUSTOMER_DETAIL, {detail: result.data});
                //pageTab
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = result.data.customerName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
          })
          
        /*if(!customerContactId) return false;*/
        this.$store.dispatch('customerContact', {id: customerContactId})    // 联系人详情
          .then((response) => {
            if(!response){return}
            let result = response.data;

            if (result.data && result.code == 0) {
              this.contactData = result.data;
              
              this.CheckcontactData.contactName= result.data.contactName;
              this.CheckcontactData.tel= result.data.tel; 
              this.CheckcontactData.phone= result.data.phone;
              this.CheckcontactData.qq= result.data.qq;
            }
          })
          
      },
      onSubmit() {
        if(this.CheckcontactData.contactName){ 
          	if(!this.contactData.contactName){
	          	Message.warning({
		            message: '不可清空联系人信息'
		        });
		        return;
	        }
        }
        if(this.CheckcontactData.tel){ 
          	if(!this.contactData.tel){
	          	Message.warning({
		            message: '不可清空联系人信息'
		        });
		        return;
	        }
        }
        if(this.CheckcontactData.phone){ 
          	if(!this.contactData.phone){
	          	Message.warning({
		            message: '不可清空联系人信息'
		        });
		        return;
	        }
        }
        if(this.CheckcontactData.qq){ 
          	if(!this.contactData.qq){
	          	Message.warning({
		            message: '不可清空联系人信息'
		        });
		        return;
	        }
        }
        
        
        if (!this.customerDetail.customerName) {
          Message.warning({
            message: '请输入客户名称'
          });
          return;
        } else if (!this.customerDetail.customerType) {
          Message.warning({
            message: '请输入客户类别'
          });
          return;
        }else if(this.contactData.tel && validTel(this.contactData.tel) == false) {
            Message.warning({
                message: '手机号码格式不正确'
            });
            return;
        }else if(this.contactData.phone && validTel(this.contactData.phone) == false) {
            Message.warning({
                message: '办公电话格式不正确'
            });
            return;
        }else if(this.contactData.qq && checkQQ(this.contactData.qq) == false) {
            Message.warning({
                message: 'QQ号不正确'
            });
            return;
        }

        if (this.customerDetail.signFlag == '1') {    //是否标记
          if (this.isSign == '1') {
            this.customerDetail.signFlag = '1'
          } else {
            this.customerDetail.signFlag = '0'
          }
        } else if (this.customerDetail.signFlag == '0') {
          if (this.unSign == '1') {
            this.customerDetail.signFlag = '1'
          } else {
            this.customerDetail.signFlag = '0'
          }
        }

        if (this.customerDetail.kpFlag == '1') {    //KP标记
          if (this.Flag) {
            this.customerDetail.kpFlag = '1'
          } else {
            this.customerDetail.kpFlag = '0'
          }
        } else if (this.customerDetail.kpFlag == '0') {
          if (this.unFlag) {
            this.customerDetail.kpFlag = '1'
          } else {
            this.customerDetail.kpFlag = '0'
          }
        }
        this.customerDetail.id = this.$route.query.id;
        this.customerDetail.customerContactId = this.$route.query.customerContactId == 'null' ? '' : this.$route.query.customerContactId;
        this.customerDetail.contactName = this.contactData.contactName;
        this.customerDetail.tel = this.contactData.tel;
        this.customerDetail.phone = this.contactData.phone;
        this.customerDetail.qq = this.contactData.qq;
        
//      if(this.customerDetail.phone){
//          var phone = this.customerDetail.phone.split('-');
//          this.customerDetail.phone = phone.join('');
//      }

        let level = getLevel(this.customerDetail.customerType);    //把type转成level
        if(level) {
          this.customerDetail.customerType = level;
        }
        this.customerDetail.customerLevel = this.customerDetail.customerType;
        
        this.$store.dispatch('customerAdd',this.customerDetail)
          .then((response) => {
            if(!response){
            	return
            }
            let result = response.data;
            if (result && result.successed == true) {
              setTimeout(()=>{
                  Message.success({
                    message: '操作成功'
                  });
              },1000)
              this.$router.replace('/customer')
            }else {
                setTimeout(()=>{
                    Message.error({
                        message: '操作失败，'+ response.data.message
                    });
                },1000)
            }
          })
      },
      close() {
        window.history.go(-1);
      },
      getCityId(id){
        this.customerDetail.provinceId = id[0];
        this.customerDetail.cityId = id[1];
        this.customerDetail.areaId = id[2];
      },
        getIndustry(val) {
            this.customerDetail.customerIndustry = val;
        }
    },
    computed: {
      ...mapGetters({
        'customerLevels': 'getSalesCategoryList',
        'customerDetail': 'getCustomerDetail',
          'pageTabsList': 'getPageTabsList'
      })
    },
    created () {
      /*
        行业已写在配置js文件
      */
      //this.$store.dispatch('getIndustryList',{code: -1});   //获取省市区信息 //获取行业信息
      this.getCustomerDetail(this.$route.query.id, this.$route.query.customerContactId);
    }
  }

</script>

<style scoped lang="scss">

  h4 {
    color: #008dd8
  }

 .action_row {
    width: 80%;
    float: left;
    margin-top: 20px;
    .top_close{
    float: left;
    margin-left: 40px;
    }
    .top_save {
      float: right;
      margin-right: 40px;
    }
  }
  .inline-row{
    width: 45%;
    display: inline-block;
  }
  .demo-form-inline{
    min-width: 800px;
    max-width: 1000px;
  }
  </style>